<template>
    <PageView :loading="isPageLoading" :loading-text="isPageLoadingText">
        <div class="div-row-container flex-right">
            <vxe-button status="primary" icon="vxe-icon-add" @click="addEvent">新增菜单</vxe-button>
        </div>

        <vxe-table
            ref="tableRef"
            border
            stripe
            keep-source
            min-height="300"
            :loading="systemMenuManagerStore.isLoading"
            :row-config="systemMenuManagerStore.rowConfig"
            :tree-config="systemMenuManagerStore.treeConfig"
            :edit-config="systemMenuManagerStore.editConfig"
            :data="systemMenuManagerStore.tableDataList">

            <vxe-column field="title" title="菜单标题" tree-node></vxe-column>

            <vxe-column field="name" title="菜单编码"></vxe-column>

            <vxe-column field="icon" title="菜单图标" :edit-render="{}">
                <template #edit="{ row }">
                    <vxe-select v-model="row.icon" placeholder="请选择菜单图标" clearable filterable>
                        <template #default>
                            <vxe-option v-for="item in globalStore.iconList"
                                :key="item.id"
                                :value="item.icon"
                                :label="item.icon" />
                        </template>

                        <template #option="{ option }">
                            <i :class="option.value" style="margin-right: 10px"></i>
                            <span> {{ option.value }}</span>
                        </template>
                    </vxe-select>
                </template>
            </vxe-column>

            <vxe-column field="routerLinkName" title="关联的路由" :edit-render="{}">
                <template #edit="{ row }">
                    <vxe-select v-model="row.routerLinkName" placeholder="请选择要关联的路由" clearable filterable>
                        <vxe-option v-for="item in systemMenuManagerStore.routerConfigList"
                            :key="item.id"
                            :value="item.routerName"
                            :label="item.menuName" />
                    </vxe-select>
                </template>
            </vxe-column>

            <vxe-column field="showStatus" title="是否展示" :edit-render="{}">
                <template #default="{ row }">
                    <vxe-tag v-if="row && row.showStatus === 1" status="primary">是</vxe-tag>
                    <vxe-tag v-else status="error">否</vxe-tag>
                </template>
                <template #edit="{ row }">
                    <vxe-select v-model="row.showStatus" placeholder="请选择是否展示">
                        <vxe-option value="1" label="是"></vxe-option>
                        <vxe-option value="0" label="否"></vxe-option>
                    </vxe-select>
                </template>
            </vxe-column>

            <vxe-column title="操作" width="160">
                <template #default="{ row }">
                    <template v-if="hasEditStatus(row)">
                        <vxe-button mode="text" icon="vxe-icon-save" status="danger" @click="saveRowEvent(row)">保存</vxe-button>
                        <vxe-button mode="text" icon="vxe-icon-repeat" @click="cancelRowEvent(row)">取消</vxe-button>
                    </template>
                    <template v-else>
                        <vxe-button mode="text" icon="vxe-icon-edit" status="primary" @click="editRowEvent(row)">编辑</vxe-button>
                    </template>
                </template>
            </vxe-column>
        </vxe-table>

        <!-- 新增菜单弹窗 -->
        <SystemMenuAddComponent />
    </PageView>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import {VxeTableInstance} from "vxe-pc-ui/types/components/table";
import {useSystemMenuManagerStore} from "@/store/UseSystemMenuManagerStore.ts";
import SystemMenuAddComponent from "@/views/system/SystemMenuAddComponent.vue";
import {DialogUtils} from "@/utils/DialogUtils.ts";
import {SystemMenuVO} from "@/entiy/vo/SystemMenuVO.ts";
import {useGlobalStore} from "@/store/UseGlobalStore.ts";

const systemMenuManagerStore = useSystemMenuManagerStore();
const globalStore = useGlobalStore();

const isPageLoading = ref<boolean>(false);
const isPageLoadingText = ref<string>("");
const tableRef = ref<VxeTableInstance<SystemMenuVO>>()

/**
 * 页面加载完成事件
 */
onMounted(() => {
    systemMenuManagerStore.getSystemMenuList().catch((error) => {
        DialogUtils.showUniqueDialog(error);
    });
});

/**
 * 点击新增按钮的事件
 */
const addEvent = () => {
    systemMenuManagerStore.isShowAddSystemMenuModel = true;
}

/**
 * 判断表格是否处于编辑状态
 *
 * @param row 编辑行的数据
 */
const hasEditStatus = (row: SystemMenuVO) => {
    const $table = tableRef.value
    if ($table) {
        return $table.isEditByRow(row)
    }
}

/**
 * 点击编辑按钮的事件
 *
 * @param row 编辑行的数据
 */
const editRowEvent = (row: SystemMenuVO) => {
    const $table = tableRef.value
    if ($table) {
        $table.setEditRow(row)
    }
}

/**
 * 点击保存按钮的事件
 *
 * @param row 编辑行的数据
 */
const saveRowEvent = (row: SystemMenuVO) => {
    const $table = tableRef.value
    if ($table) {
        isPageLoading.value = true;
        isPageLoadingText.value = "正在保存, 请稍后...";
        systemMenuManagerStore.updateSystemMenu(row).then(() => {
            $table.clearEdit();
        }).catch((error) => {
            DialogUtils.showUniqueDialog(error);
        }).finally(() => {
            isPageLoading.value = false;
        });
    }
}

/**
 * 点击取消按钮的事件
 *
 * @param row 编辑行的数据
 */
const cancelRowEvent = (row: SystemMenuVO) => {
    const $table = tableRef.value
    if ($table) {
        $table.clearEdit().then(() => {
            // 还原行数据，需要 vxe-table 设置 keep-source 属性
            $table.revertData(row)
        })
    }
}
</script>
